<template>
<div id="substation">
  站点管理
  <Divider orientation="left">变电站统计</Divider>
  <Row>
    <Col span="8">
    第三方变电站：{{ typestatis.third }}
    </Col>
    <Col span="8">
    自营变电站：{{ typestatis.self }}
    </Col>
  </Row>
  <Divider orientation="left">变电站查询</Divider>
  <Row>
    <Col span="2">
    <Cascader :data="partProvCityDist" change-on-select @on-change="changePCD"></Cascader>
    </Col>
    <Col span="2">
    <Select v-model="searchParam.voltage" placeholder="电压" multiple>
      <Option v-for="(voltage,index) in voltages" :value="voltage.value" :key="index">{{ voltage.label }}</Option>
    </Select>
    </Col>
    <Col span="2">
    <Select v-model="searchParam.type" placeholder="类型" multiple>
      <Option v-for="(type,index) in types" :value="type.value" :key="index">{{ type.label }}</Option>
    </Select>
    </Col>
    <Col span="4">
    <DatePicker type="datetimerange" placeholder="选择日期" style="width:100%" @on-change="changeDatePick"></DatePicker>
    </Col>
    <Col span="2">
    <Button type="primary" @click="search">查询</Button>
    <Button type="primary" @click="add">新增</Button>
    </Col>
  </Row>
  <Divider orientation="left">变电站列表</Divider>
  <Table :columns="tableHeader" :data="list" @on-sort-change='changeSort'></Table>
  <Page :total="searchParam.total" :page-size="searchParam.pageSize" show-elevator prev-text="上一页" next-text="下一页" @on-change="changePage" />

</div>
</template>

<script>
export default {
  name: 'Substation',
  data() {
    return {
      // 根据用户统计变电站信息
      typestatis: {
        self: {
          problem: '0', // 当前用户权限下的变电站总数
          abnormal: '0', // 已运行变电站下面的监测设备总数
          deploy: '0', // 有严重问题（未处置信息）的变电站数
          all: '0' // 自营变电站总数
        },
        third: {
          problem: '0',
          abnormal: '0',
          deploy: '0',
          all: '0'
        }
      },
      // 获取指定区域下的省市区数据
      partProvCityDist: [],
      // 电压字典
      voltages: [],
      // 变电站类型字典
      types: [],
      // 表头
      tableHeader: [{
        title: '序列号',
        key: 'index'
      }, {
        title: 'sid',
        key: 'sid',
        sortable: true
      }, {
        title: '站点名称',
        key: 'short',
        filters: [{
          label: '请选择站点名称',
          value: 0
        }],
        filterRemote: (value, row) => {
          this.changeFilter(value, row)
        }
      }, {
        title: '站点状态',
        key: 'status',
        sortable: true,
        filters: [{
          label: '请选择站点状态',
          value: 0
        }],
        filterRemote: (value, row) => {
          this.changeFilter(value, row)
        }
      }, {
        title: '电压等级',
        key: 'voltage',
        sortable: true,
        filters: [{
          label: '请选择电压等级',
          value: 0
        }],
        filterRemote: (value, row) => {
          this.changeFilter(value, row)
        }
      }, {
        title: '调度等级',
        key: 'grade',
        sortable: true,
        filters: [{
          label: '请选择调度等级',
          value: 0
        }],
        filterRemote: (value, row) => {
          this.changeFilter(value, row)
        }
      }, {
        title: '站点类型',
        key: 'type',
        sortable: true,
        filters: [{
          label: '请选择站点类型',
          value: 0
        }],
        filterRemote: (value, row) => {
          this.changeFilter(value, row)
        }
      }, {
        title: '产权单位',
        key: 'owner',
        sortable: true,
        filters: [{
          label: '请选择产权单位',
          value: 0
        }],
        filterRemote: (value, row) => {
          this.changeFilter(value, row)
        }
      }, {
        title: '运维单位',
        key: 'maintainer',
        sortable: true,
        filters: [{
          label: '请选择运维单位',
          value: 0
        }],
        filterRemote: (value, row) => {
          this.changeFilter(value, row)
        }
      }, {
        title: '所属区域',
        key: 'region'
      }, {
        title: '创建时间',
        key: 'crtime'
      }, {
        title: '修改时间',
        key: 'chtime'
      }, {
        title: '操作',
        key: 'handle',
        width: 200,
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('Button', {
              type: 'Button',
              class: 'ivu-btn ivu-btn-warning',
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  console.log('查看详情')
                }
              }
            }, '查看详情'),
            h('Button', {
              type: 'Button',
              class: 'ivu-btn ivu-btn-primary',
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.edit(params.row)
                }
              }
            }, '编辑')
          ])
        }
      }],
      // 列表
      list: [],
      // 查询条件
      searchParam: {
        search: {
          prov: [],
          city: [],
          dist: [],
          short: [],
          sid: [],
          voltage: [],
          type: [],
          crtime: []
        },
        sorType: {},
        statis: {
          short: {
            page: 1,
            pageSize: 20
          }
        },
        page: 1, // 页码
        pageSize: 5, // 每页显示的条数
        total: 1 // 总条数
      },
      // 列表id
      detailId: '',
      // 详情模态框状态
      detailModSta: false,
      // 新增模态框状态
      addModSta: false
    }
  },
  created() {
    let _self = this
    let obj = {}
    // 获取省市区变电站集合
    this.$axios.post('/substation/getProvCityDist', obj).then(res => {
      _self.partProvCityDist = res.data
    })
    // 电压等级
    this.$axios.post('/dic/voltage', obj).then(res => {
      _self.voltages = res.data
    })
    // 变电站类型
    this.$axios.post('/dic/substype', obj).then(res => {
      _self.types = res.data
    })
    // 统计变电站类型相关
    this.$axios.post('/substation/typestatis', obj).then(res => {
      console.log('res.data', res.data)
      _self.typestatis = res.data
    })
  },
  mounted() {},
  computed: {},
  methods: {
    // 联级选择事件
    changePCD(v, s) {
      this.searchParam.search.prov = []
      this.searchParam.search.city = []
      this.searchParam.search.dist = []
      this.searchParam.search.short = []
      let l = s.length
      if (l) {
        let pcds = ['prov', 'city', 'dist', 'short']
        s.forEach((obj, index) => {
          let pcd = pcds[index]
          this.searchParam.search[pcd].push(obj.label)
          let set = new Set(this.searchParam.search[pcd]) // 去重
          this.searchParam.search[pcd] = [...set] // 去重
        })
      }
    },
    // 日期选择器
    changeDatePick(d) {
      this.searchParam.search.crtime = d
    },
    // 变电站查询
    search() {
      let _self = this
      let obj = this.searchParam
      console.log('obj', obj)
      this.$axios.post('/substation/search', obj).then(res => {
        _self.list = res.data.list
        _self.searchParam.total = res.data.count
      })
      // 统计
      this.$axios.post('/substation/statis', obj).then(res => {
        // 变电站名称
        let shortArr = []
        res.data.shortGroup.forEach(item => {
          shortArr.push({
            label: item._id + '(' + item.count + ')',
            value: item._id
          })
        })
        _self.tableHeader[2]['filters'] = shortArr
        // 站点状态
        let statusArr = []
        res.data.statusGroup.forEach(item => {
          statusArr.push({
            label: item._id + '(' + item.count + ')',
            value: item._id
          })
        })
        _self.tableHeader[3]['filters'] = statusArr
        // 电压等级
        let voltageArr = []
        res.data.voltageGroup.forEach(item => {
          voltageArr.push({
            label: item._id + '(' + item.count + ')',
            value: item._id
          })
        })
        _self.tableHeader[4]['filters'] = voltageArr
        // 调度等级
        let gradeArr = []
        res.data.gradeGroup.forEach(item => {
          gradeArr.push({
            label: item._id + '(' + item.count + ')',
            value: item._id
          })
        })
        _self.tableHeader[5]['filters'] = gradeArr
        // 站点类型
        let typeArr = []
        res.data.typeGroup.forEach(item => {
          typeArr.push({
            label: item._id + '(' + item.count + ')',
            value: item._id
          })
        })
        _self.tableHeader[6]['filters'] = typeArr
        // 产权单位
        let ownerArr = []
        res.data.ownerGroup.forEach(item => {
          ownerArr.push({
            label: item._id + '(' + item.count + ')',
            value: item._id
          })
        })
        _self.tableHeader[7]['filters'] = ownerArr
        // 运维单位
        let mainArr = []
        res.data.mainGroup.forEach(item => {
          mainArr.push({
            label: item._id + '(' + item.count + ')',
            value: item._id
          })
        })
        _self.tableHeader[8]['filters'] = mainArr
      })
    },
    // 变电站重置
    searchReset(name) {
      this.$refs[name].resetFields()
    },
    // 分页页码改变时
    changePage(value) {
      this.searchParam.page = value
      this.$options.methods.search.bind(this)()
    },
    // 排序
    changeSort(data) {
      let _self = this
      if (data.order === 'asc') {
        this.searchParam.sorType[data.key] = 1
      } else if (data.order === 'desc') {
        this.searchParam.sorType[data.key] = -1
      } else {
        this.searchParam.sorType = {}
      }; // 排序条件
      let obj = this.searchParam
      this.$axios.post('/substation/search', obj).then(res => {
        _self.list = res.data.list
        _self.searchParam.total = res.data.count
      })
    },
    // 筛选
    changeFilter(v, r) {
      console.log('999', v, r)
      this.searchParam.search[r] = v
      this.$options.methods.search.bind(this)()
    },
    // 编辑
    edit(row) {
      this.detailId = row.id // 列表id
      this.detailModSta = true // 显示模态框
    },
    // 【编辑组件调用方法】关闭详情模态框
    changeDetailModSta(childVal) {
      this.detailModSta = childVal
    },
    // 新增
    add() {
      this.addModSta = true // 显示新增模态框
    },
    // 【新增组件调用方法】关闭新增模态框
    changeAddModSta(childVal) {
      this.addModSta = childVal
    }
  }
}
</script>
